<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font_index/iconfont.css">
    <link rel="stylesheet" href="css/details.css">
</head>
<body>
    <div class="top-wrap">
        <div class="top-nav">
            <ul class="top-nav-l">
                <li>欢迎光临文轩书社！</li>
                <li>
                    <p class="index-login"><a href=login.html>请<span>登录</span></a></p>
                    <p class="welcome"><span>xxx</span>欢迎您&nbsp;&nbsp;<i>退出</i></p>
                </li>
                <li>
                    <a href="register.html">免费注册</a>
                </li>
            </ul>
            <ul class="top-nav-r">
                <li>
                    <a href="##">我的书社</a> 
                    <span></span>
                    <ul class="list">
                        <li><a href="##">我的订单</a> </li>
                        <li><a href="##">售后退换</a> </li>
                        <li><a href="##">暂存款  </a> </li>
                        <li><a href="##">礼券    </a> </li>
                        <li><a href="##">购书卡  </a>  </li>
                    </ul>
                </li>
                <li><a href="##">企业采购</a></li>
                <li>
                    <a href="##">客户服务</a>
                    <span></span>
                    <ul>
                        <li><a href="##">在线客服</a></li>
                        <li><a href="##">帮助中心</a></li>
                    </ul>
                </li>
                <li><a href="##">手机书社</a><span></span></li>
            </ul>
        </div>
    </div>
    <div class="empty"></div>
    <!-- 网页的隐藏搜索 -->
    <div class="hide-search-wrap">
        <div class="hide-search">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <form action="">
                <input type="text">
                <input type="submit" value="搜索">
            </form>
        </div>
    </div>    
    <!-- 网页的搜索 -->
    <div class="search-wrap-wrap">
        <div class="search-wrap">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt=""></a>
            </div>
            <div class="search">
                <form action="">
                    <input type="text">
                    <input type="submit" value="搜索">
                </form>
                <div class="hot">
                    热搜 :
                    <a href="##">9月领券区</a>
                    <span>|</span>
                    <a href="##">习近平谈治国理政3</a>
                    <span>|</span>
                    <a href="##">今日秒杀</a>
                    <span>|</span>
                    <a href="##">曾国藩</a>
                    <a href="##">高级搜索</a>
                </div>
            </div>
            <div class="cart">
                <aside>
                    <i>0</i>
                    <a href="cart.html">购物车</a>    
                </aside>
            </div>
        </div>
    </div>
    <!-- 网页的主导航 -->
    <div class="nav-wrap">
        <div class="nav">
            <div class="main">
                全部商品分类:
                <div class="menu">
                    <figure>
                        童书 育儿
                        <figcaption>
                            <a href="##"> 绘本</a>&nbsp;<span>|</span>
                            <a href="##">国学启蒙</a>&nbsp;<span>|</span>
                            <a href="##">趣味童书</a><br>
                            <aside >
                                <ul>
                                    <li>
                                        <p>0-6岁<i>></i></p> 
                                        <p>
                                            <a href="##">幼儿绘本</a><span>|</span>
                                            <a href="##">幼儿启蒙</a><span>|</span>
                                            <a href="##">国学启蒙</a><span>|</span>
                                            <a href="##">趣味图书</a><span>|</span>
                                            <a href="##">注音读物</a><span>|</span>
                                            <a href="##">中外名著</a><span>|</span>
                                            <a href="##">智力开发</a><span>|</span>
                                            <a href="##">幼小衔接入学</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>6岁以上<i>></i></p>  
                                        <p>
                                            <a href="##">少儿科普</a><span>|</span>
                                            <a href="##">少儿文学</a><span>|</span>
                                            <a href="##">少儿童书</a><span>|</span>
                                            <a href="##">少儿读物</a><span>|</span>
                                            <a href="##">少儿英语</a><span>|</span>
                                            <a href="##">兴趣培养</a><span>|</span>
                                            <a href="##">注音读物</a><span>|</span>
                                            <a href="##">童话故事</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>点读书<i>></i></p> 
                                        <p>
                                            <a href="##">点读书</a>
                                        </p>
                                    </li>
                                </ul>
                            </aside>    
                        </figcaption>
                    </figure>
                    <figure>
                        文学 小说
                        <figcaption>
                            <a href="##">外国文学</a>&nbsp;<span>|</span>
                            <a href="##">国学</a>&nbsp;<span>|</span>
                            <a href="##">民间故事</a><br>
                            <aside>
                                <ul>
                                    <li>
                                        <p>文学<i>></i></p> 
                                        <p>
                                            <a href="##">现当代文学</a><span>|</span>
                                            <a href="##">民间文学</a><span>|</span>
                                            <a href="##">民间故事</a><span>|</span>
                                            <a href="##">经典国学</a><span>|</span>
                                            <a href="##">经典国学解析</a><span>|</span>
                                            <a href="##">外国文学</a><span>|</span>
                                            <a href="##">外国文学研究</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>小说<i>></i></p> 
                                        <p>
                                            <a href="##">青春小说</a><span>|</span>
                                            <a href="##">情感小说</a><span>|</span>
                                            <a href="list.html">武侠小说</a><span>|</span>
                                            <a href="##">科幻小说</a><span>|</span>
                                            <a href="##">官场、职场小说</a><span>|</span>
                                            <a href="##">历史、军事小说</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>漫画<i>></i></p> 
                                        <p>
                                            <a href="##">幽默漫画</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>诗歌散文<i>></i></p> 
                                        <p>
                                            <a href="##">诗歌</a>
                                            <a href="##">散文</a>
                                            <a href="##">杂文</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>名著古籍<i>></i></p> 
                                        <p>
                                            <a href="##">四大名著</a>
                                            <a href="##">历史古籍</a>
                                            <a href="##">名著读物</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>传记<i>></i></p> 
                                        <p>
                                            <a href="##">中国名人传记</a>
                                            <a href="##">外国名人传记</a>
                                        </p>
                                    </li>
                                </ul>
                                <ul>
                                    <li>
                                        <p>作品集<i>></i></p> 
                                        <p>
                                            <a href="##">作家作品集</a>
                                        </p>
                                    </li>
                                </ul>
                            </aside>    
                        </figcaption>
                    </figure>
                </div>
            </div>
            <div class="item">
                <a href="##">文轩畅销榜</a>
                <a href="##">新书榜</a>
                <a href="##">社科榜</a>
                <a href="##">文学榜</a>
                <a href="##">童书榜</a>
                <a href="##">音像</a>
                <a href="##">百货</a>
                <a href="##">电子书</a>
                <a href="##">国际频道</a>
            </div>
        </div>
    </div>
    <!-- 年度好书 -->
    <div class="haoshu-wrap">
        <div class="haoshu">
            <ul>
                <li>★年度精挑细选：</li>
                <li><a href="##">2019年度获奖中国好书</a></li>
                <li><a href="##">2019诺贝尔文学奖</a></li>
                <li><a href="##">热门教辅</a></li>
                <li><a href="##">金庸</a></li>
                <li><a href="##">流浪地球</a></li>
                <li><a href="##">治愈心灵好书</a></li>
                <li><a href="##">南京大屠杀</a></li>
                <li><a href="##">小学图书馆</a></li>
                <li><a href="##">美女与野兽</a></li>
            </ul>
        </div>
    </div>
    <div class="details">
        <h2>图书&nbsp;&nbsp;&nbsp;<span>>&nbsp;&nbsp;文学/小说&nbsp;&nbsp;>&nbsp;&nbsp;小说&nbsp;&nbsp;>&nbsp;&nbsp;武侠小说</span></h2>
        <div class="imgleft">
            <div class="s_box">
                <img src="images/list1.jpg" alt="">
                <span></span>
                <!-- 利用布局解决span闪烁的问题，配合css -->
                <p></p>
                <img src="images/pro_mj.png" alt="">
            </div>
            <a href="shouchang.html"></a>
            <div class="b_box">
                <img src="images/list1.jpg" alt="">
            </div>
        </div>
        <div class="wordright">
            <h3>金庸作品集</h3>
            <p>企业采购书卡&书目服务电话（微信同号）178-8231-4046（法定工作日9：00-17：00）</p>
            <p>定价：<span>￥968</span></p>
            <p>文轩价：<span>￥755</span><i>（7.8折）</i></p>
            <p>配送至：<select name="" id="">
                <option value="">北京</option>
                <option value="">上海</option>
                <option value="">深圳</option>
            </select></p>
            <p>作者：<a href="##"> 金庸</a></p>
            <p>所属分类：<a href="##">图书&nbsp;&nbsp;&nbsp;<span>>&nbsp;&nbsp;文学/小说&nbsp;&nbsp;>&nbsp;&nbsp;小说&nbsp;&nbsp;>&nbsp;&nbsp;武侠小说</span></a></p>
            <aside>促销活动：
                <p>图书音像单笔满99减10元，满499减100！（65折内图书、电子书除外）</p>
                <p>老客户回馈，积分换礼券，购书更实惠</p>
                <p>大陆非新疆西藏地区满48包邮，新疆西藏运费每单20元<a href="##">详情</a></p>
            </aside>
            <p class="count">购买数量：<i>-</i><span>1</span><b>+</b>&nbsp;件</p>
            <p class="cart">
                <span class="iconfont icon-gouwuche"></span>
                <i>加入购物车</i> 
                <b class="cart-tishi">
                    <span>提示       <i>×</i></span>
                    <span>商品已成功添加到购物车</span>
                    <span><a href="cart.html">去购物车结算</a><i>继续购物>></i></span>
                </b>
            </p>
            <article>
                <p>服务：由文轩网直接销售和发货，并提供售后服务</p>
                <p>
                    <a href="##">正品保证</a>&nbsp;<span>|</span>&nbsp;
                    <a href="##">闪电发货</a>&nbsp;<span>|</span>&nbsp;
                    <a href="##">货到付款</a>&nbsp;<span>|</span>&nbsp;
                    <a href="##">高效退货</a>
                </p>
            </article>
            <p class="cart1"><b>￥755.0</b>（7.8折）<a href="cart.html"><span class="iconfont icon-gouwuche"></span><i>去购物车结算</i> </a></p>
        </div>
    </div>
    <div class="jieshao">
        <ul>
            <li class="active1">商品介绍</li>
            <li>商品评论</li>
        </ul>
        <div>
            <article class="active2">
                <ul>
                    <li>作者：<a href="##">金庸</a></li>
                    <li>出版社：<a href="##">广州出版社</a></li>
                    <li>出版时间：2013-04-01</li>
                    <li>开本：32开</li>
                    <li>页数：无</li>
                    <li>印刷时间：2013-04-01</li>
                    <li>字数：无</li>
                    <li>装帧：盒装</li>
                    <li>语种：中文</li>
                    <li>版次：2</li>
                    <li>印次：3</li>
                    <li>版本号：21312312</li>
                </ul>
            </article>
            <article>
                <aside>
                    <p>用户评分：</p>
                    <p>4.2 <span>星</span></p>
                    <p>共5人参与</p>
                </aside>
                <aside>
                    <dl>
                        <dt></dt>
                        <dd><span></span></dd>
                    </dl>
                    <dl>
                        <dt></dt>
                        <dd><span></span></dd>
                    </dl>
                    <dl>
                        <dt></dt>
                        <dd><span></span></dd>
                    </dl>
                    <dl>
                        <dt></dt>
                        <dd><span></span></dd>
                    </dl>
                    <dl>
                        <dt></dt>
                        <dd><span></span></dd>
                    </dl>
                </aside>
                <aside>
                    <p>我来评分</p>
                    <p><i></i><i></i><i></i><i></i><i></i><b></b></p>
                    <p><span><a href="##"> 我来写评论</a></span>写点评 <a href="##">送积分>></a></p>
                </aside>
            </article>
        </div>
    </div>
    <!-- 网页的指南 -->
    <div class="guide">
        <ul>
            <li>
                <h3> 新手入门</h3>
                <ul>
                    <li><a href="##">购物保障</a> </li>
                    <li><a href="##">购物流程</a> </li>
                    <li><a href="##">常见问题</a> </li>
                    <li><a href="##">联系客服</a> </li>
                </ul>
            </li>
            <li>
                <h3> 配送服务</h3>
                <ul>
                    <li><a href="##">货到付款区域查询</a> </li>
                    <li><a href="##">配送范围和时间 </a>  </li>
                    <li><a href="##">配送收费标准  </a>   </li>
                    <li><a href="##">验货与签收   </a>    </li>
                </ul>
            </li>
            <li>
                <h3> 支付方式</h3>
                <ul>
                    <li><a href="##">货到付款  </a>  </li>
                    <li><a href="##">在线支付  </a>  </li>
                    <li><a href="##">银行转账  </a>  </li>
                    <li><a href="##">其他方式支付</a></li>
                </ul>
            </li>
            <li>
                <h3> 售后服务</h3>
                <ul>
                    <li><a href="##">退换货规则   </a>    </li>
                    <li><a href="##">如何申请售后服务</a> </li>
                    <li><a href="##">退款及体现   </a>   </li>
                </ul>
            </li>
            <li>
                <h3> 我的订单</h3>
                <ul>
                    <li><a href="##">下单演示</a> </li>
                    <li><a href="##">订单状态</a> </li>
                    <li><a href="##">订单取消</a> </li>
                    <li><a href="##">发票制度</a> </li>
                </ul>
            </li>
            <li>
                <h3> 文轩服务</h3>
                <ul>
                    <li><a href="##">礼券    </a>   </li>
                    <li><a href="##">文轩购书卡 </a> </li>
                    <li><a href="##">文轩好书推荐</a></li>
                    <li><a href="##">交易条款  </a>  </li>
                </ul>
            </li>
            <li>
                    <h3>电子阅读器</h3>  
                    <ul>
                    <li><a href="##">android</a>  </li>
                    <li><a href="##">ipad   </a>  </li>
                    <li><a href="##">iphone </a>  </li>
                    <li><a href="##">pc阅读器 </a> </li>
                </ul>   
            </li>
        </ul>
    </div>
    <!-- 网页的服务 -->
    <div class="server">
        <ul>
            <li>正品保证<br>假一赔十</li>
            <li>一网打尽<br>更多优惠</li>
            <li>800城市<br>北上广深次日到达</li>
            <li>电子发票<br>报销无忧</li>
        </ul>
    </div>
    <!-- 网页的底部 -->
    <div class="footer">
        <h3>
            <a href="##">关于文轩</a>&nbsp;|
            <a href="##">联系文轩</a>&nbsp;|
            <a href="##">加入文轩</a>&nbsp;|
            <a href="##">合作伙伴</a>
        </h3>
        <p>川公网安备 51010602000457号&nbsp;|&nbsp;<a href="##">出版物经营许可证</a>&nbsp;|&nbsp;蜀ICP备1101号</p>
        <p>Copyright(C) 文轩网2000-2020 版权所有 丨 客服热线：400-072-0808</p>
    </div>


    
    

</body>
</html>
<script src="js/jquery.1.12.4.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/details.js"></script>